<template>
  <div class="form">
    <div class="tab-nav">
      <span
        v-for="(item, index) in status"
        :key="index"
        :class="current == index ? 'active' : ''"
        @click="tabTap"
        :data-index="index"
        >{{ item }}</span
      >
    </div>
    <div class="tab-content">
      <div
        class="cont"
        :class="current == 0 ? 'active' : ''"
        @scroll="listScroll"
      >
        <template v-if="state.undone.length > 0">
          <router-link
            :to="'/host/comment?id=' + item.id"
            v-for="item in state.undone"
            :key="item.id"
            >{{ item.checkin_no }}</router-link
          >
        </template>
        <div class="empty" v-else>暂无数据</div>
      </div>
      <div
        class="cont"
        :class="current == 1 ? 'active' : ''"
        @scroll="listScroll"
      >
        <template v-if="state.done.length > 0">
          <router-link
            :to="'/host/comment?id=' + item.id"
            v-for="item in state.done"
            :key="item.id"
            >{{ item.checkin_no }}</router-link
          >
        </template>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import ajax from "../../util/http";
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

const status = ["待点评", "已点评"];
const current = ref(0);

const state = reactive({
  done: [],
  undone: [],
  hasmore: [true, true],
  page: [0, 0], //页码
});

const tabTap = (e) => {
  current.value = e.target.dataset.index;
  sessionStorage.setItem("currentTab", current.value);
  state.done = [];
  state.undone = [];
  state.page = [0, 0];
  getComment(current.value);
};
const getComment = (type) => {
  ajax
    .post("/star/scene/comment", {
      token: JSON.parse(localStorage.getItem("userinfo")).token,
      type: type,
      page: state.page[current.value], //页码
      pagenums: 100,
    })
    .then((res) => {
      if (res.code == 1) {
        if (res.data.length > 0) {
          if (type == 0) {
            state.undone = [...state.undone, ...res.data];
          }
          if (type == 1) {
            state.done = [...state.done, ...res.data];
          }
        } else {
          state.hasmore[current.value] = false;
        }
      }
    });
};

if (
  sessionStorage.getItem("currentTab") == 0 ||
  sessionStorage.getItem("currentTab") == 1
) {
  current.value = sessionStorage.getItem("currentTab");
  getComment(current.value);
} else {
  getComment(0);
}

const listScroll = (e) => {
  if (state.hasmore[current.value]) {
    if (
      e.srcElement.scrollHeight - e.srcElement.scrollTop - 5 <
      e.srcElement.clientHeight
    ) {
      state.page[current.value] += 1;
      getComment(current.value);
    }
  }
};
</script>
<style scoped>
.form {
  display: flex;
  flex-direction: column;
}
</style>